<template>
  <div>
    <vxe-form
      :data="formConfig.data"
      :items="formConfig.items"
      :rules="formConfig.rules"
      title-colon
      @reset="resetEvent"
      @submit="submitEvent"
    />
  </div>
</template>

<script>
  export default {
    props: {
      formConfig: {
        type: Object,
        default() {
          return {
            data: {},
            items: [],
            rules: [],
          }
        },
      },
    },
    data() {
      return {
        size: 'small',
      }
    },
    methods: {
      submitEvent() {
        let submitData = {}
        const formData = this.formConfig.data || {}
        this.formConfig.items.forEach((item) => {
          if (item.field) {
            submitData[item.field] = formData[item.field] || ''
          }
        })
        console.log(submitData)
      },
      resetEvent() {
        this.$emit('resetEvent')
      },
    },
  }
</script>
